<!-- 修改检测名称 -->
<template>
  <div id="dialog-container">
    <el-dialog v-dialogDrag title="修改检测名称" append-to-body :close-on-click-modal="false"
      :visible.sync="dialogVisible" @close="$emit('update:show', false)" :before-close="handleClose" :show="show" width="800px">
      <el-form :model="formData" :inline="true" ref="form" label-width="100px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="检测类型：">
              <el-select v-model="formData.testType" filterable placeholder="请选择" style="width: 200px;">
              <el-option  :label="all" :value="' '"></el-option>
              <el-option v-for="item in typeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测项目：">
              <el-input v-model="formData.fieldName" @blur="changeFName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="检测标准：">
              <el-input type="textarea" v-model="formData.standrad" style="width: 566px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测位置：">
              <el-select v-model="formData.testPart" filterable placeholder="请选择" style="width: 200px;">
                <el-option v-for="item in partList" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <hr>
          <h3>添加标尺/技术要求&数值范围</h3>
        </el-row>
        <el-row>
          <el-table :data="standradData" size="small">
            <el-table-column width="50">
              <template slot-scope="scope">
                <el-radio :label="scope.$index" v-model="formData.standrad_type" @change.native="getCurrentRow(scope.$index, scope.row)"></el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="standrad_name" label="标尺/技术要求" min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.standrad_name" size="small"></el-input>
              </template>
            </el-table-column>
              <el-table-column prop="condition" label="条件" min-width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.condition"  size="small" placeholder="请选择" style="width: 100px;">
                  <el-option v-for="item in scope.row.condition" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="col1" label="值1" min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.col1" size="small"></el-input>
              </template>
            </el-table-column>
                      <el-table-column prop="col2" label="值2" min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.col2" size="small"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.unit" size="small"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="decimal_point" label="小数点" min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.decimal_point" size="small"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="number_limit" label="检测数据个数" min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.number_limit" size="small"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="opera" align="center" label="操作" min-width="50">
              <template slot-scope="scope">
                <el-button icon="el-icon-plus" plain size="mini" type="text"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <hr>
        <el-row>
          <h3>添加检测设备信息 > 占用设备用时</h3>
        </el-row>
        <br>
        <add-equipments @updateDevice="updateDevice" style="display: inline-block;"></add-equipments>
        <el-button type="" size="small">删除</el-button>
        <el-table :data="tableData" size="small">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
          <el-table-column prop="code" align="center" label="设备编号" min-width="100"></el-table-column>
          <el-table-column prop="name" align="center" label="设备名称" min-width="100"></el-table-column>
          <el-table-column prop="occupy" align="center" label="设备用时" min-width="100">
            <template slot-scope="scope">
                <el-input v-model="scope.row.occupy" size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="opera" align="center" label="操作" min-width="50">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="deleteDevice(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <br>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input type="textarea" v-model="formData.remark" style="width: 566px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="verifyAdd">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getTestFieldList , postSaveTestField, getTestFieldInfo} from 'service/task';
  import AddEquip from './add-equipments';
  export default {
    components: {
      'add-equipments': AddEquip
    },
    data() {
      return {
        dialogVisible: false,
        all:'全部',
        formData: {
          test_type: '',
          field_name: '',
          standrad: '',
          test_part: '',
          standrad_type: '',
          standrad_name: '',
          col1: '',
          condition: '',
          col2: '',
          unit: '',
           decimal_point: '',
          number_limit:'',
           occupy: '',
          remark: ''
        },
        standradData: [],
        tableData: []
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      modifyId: {
        type: String
      }
    },
    watch: {
      show() {
        this.dialogVisible = this.show;
        if(this.dialogVisible) {
          getTestFieldInfo(this.modifyId)
            .then(res => {
              this.formData.test_type = res.data.result.field.test_type;
              this.formData.field_name = res.data.result.field.field_name;
              this.formData.standrad = res.data.result.field.standrad;
              this.formData.test_part = res.data.result.field.test_part;
              this.formData.standrad_type = res.data.result.field.standrad_type;
              this.formData.standrad_name = res.data.result.field.standrad_name;
              this.formData.col1 = res.data.result.field.col1;
              this.formData.condition = res.data.result.field.condition;
              this.formData.col2 = res.data.result.field.col2;
              this.formData.unit = res.data.result.field.unit;
              this.formData.decimal_point = res.data.result.field.decimal_point;
              this.formData.number_limit = res.data.result.field.number_limit;
             this.formData.occupy = res.data.result.field.occupy;
              this.formData.remark = res.data.result.field.remark;
              this.tableData = res.data.result.device;
            })
        }
      }
    },
    methods: {
      handleClose() { /* 关闭的时候更新状态值 */
        this.dialogVisible = false;
        this.$refs['form'].resetFields();
      },
      // 单选获取表格行
      getCurrentRow(index, row) {
        this.formData.standrad_name = row.standrad_name;
        this.formData.col1 = row.col1;
        this.formData.condition = row.condition;
        this.formData.col2 = row.col2;
        this.formData.unit = row.unit;
        this.formData.decimal_point = row.decimal_point;
         this.formData.number_limit = row.number_limit;
      },
      // 检测项目blur事件
      changeFName() {
        getTestFieldList({
          // this.axios.get('/system/testFieldList', {
              test_type: '',
              field_name: this.formData.field_name,
              pageNumber: 1,
              pageSize: 5,
              sort: '',
              order: '',
            })
          .then(res => {
            this.standradData = res.data.result.content;
          });
      },
      // 更新设备列表
      updateDevice(val) {
        this.tableData = val;
      },
      deleteDevice(index) {
        this.tableData.splice(index, 1);
      },
      // 确定
      verifyAdd() {
        let deviceData = [];
        for(let i = 0; i < this.tableData.length; i++) {
          deviceData.push({
                            device_id: this.tableData[i].id,
                            code: this.tableData[i].code,
                            name: this.tableData[i].name,
                            occupy: this.tableData[i].occupy
                          })
        }
        let params = {
          field: {
            test_type: this.formData.test_type,
            field_name: this.formData.field_name,
            standrad: this.formData.standrad,
            test_part: this.formData.test_part,
            standrad_name: this.formData.standrad_name,
            col1: this.formData.col1,
            condition: this.formData.condition,
            col2: this.formData.col2,
            unit: this.formData.unit,
            decimal_point: this.formData.decimal_point,
            number_limit: this.formData.number_limit,
          remark: this.formData.remark
          },
          device: deviceData
        };
        postSaveTestField(params)
          .then(res => {
            if (res.data.success) {
              this.$alert('新增成功！', '提示', {
                type: 'success'
              })
            }
            this.dialogVisible = false;
          });
      }
    }
  }

</script>
